<template>
       <!-- 支付方式 -->
  <div class="pay-type">
    <van-radio-group v-model="radio">
      <van-cell-group title="付款方式" >
        <van-cell clickable @click="radio=index" v-for="(item, index) in payItem" :key="index">
          <template #title>
            <img :src="require(`../../../assets/img/order/${item.payTypeImg}`)">
            <span>{{item.payName}}</span>
          </template>
          <van-radio slot="right-icon" :name="index" checked-color="#07c160" />
        </van-cell>
      </van-cell-group>
    </van-radio-group>
  </div>
</template>

<script>
export default {
  name: 'PayType',
  data () {
    return {
      radio: 0,
      payItem: [
        {
          payTypeImg: 'wx.png',
          payName: '微信支付'
        },
        {
          payTypeImg: 'zfb.png',
          payName: '支付宝支付'
        },
        {
          payTypeImg: 'hb.png',
          payName: '花呗支付'
        }
      ]
    }
  }
}

</script>
<style lang='scss' scoped>
.pay-type {
  img {
    @include setWH(px2rem(30), px2rem(25));
    vertical-align: middle;
    margin-right: px2rem(5);
  }
}
</style>
